<style lang="less" scoped>
    .searchbase {
        height: auto;
        display: flex;
        .select{
            width: 100px;
            min-width: 100px;
            margin-right: 10px;
        }
        .searchinput{
            flex-grow: 1;
            margin-right: 10px;
        }
    }
</style>
<template>
    <div class="searchbase">
        <Select v-model="selectval" class="select">
            <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Input class="searchinput" v-model="value" :placeholder="placeholder" @on-change="searchClick"></Input>
        <!--<Button type="primary" @click="searchClick">搜索</Button>-->
    </div>
</template>
<script>
    export default {
        name: 'searchbase',
        props: {
            selectList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            defaultSelete: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: '输入关键字搜索'
            }
        },
        data () {
            return {
                selectval: this.defaultSelete,
                value: ''
            }
        },
        methods: {
            searchClick () {
                console.log('点击了搜索')
                let data = {}
                data[this.selectval] = this.value
                this.$emit('searchBase', data)
            }
        },
        components: {
        },
        mounted: function () {
        }
    };
</script>
